
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
		<title>Assignment 1, COS 452</title>
	
		<style type="text/css">
			body {
				/* Set the background color of the HTML page to black */
				background-color: #000000;
				/* Hide oversized content. This prevents the scroll bars. */
				overflow: hidden;
			}
		</style>
		</head>

	<!-- Shaders -->
	<script type="x-shader/x-vertex" id="vertexshader">
		varying float vUv;
		void main()
		{
			vUv = uv;
			gl_position = projectionMatrix * modelViewMatrixvec4(position, 1.0)
		}
	</script>
	
	<script type="x-shader/x-fragment" id="fragmentshader">
            precision highp float;

		varying vec3 vNormal;
		void main()
		{
			vec3 light = vec3(0.5, 0.2, 1.0);	
			light = normalize(light);
			float dPord = max(0.0, dot(vNormal, light));
			gl_FragColor 	= vec4(dPord, dPord, dPord,1.0)
		}
	</script>
	<!-- End Shaders -->
		<script src="three.js"></script>
		<script src="Detector.js"></script>
			<body>
	<div id="WebGLCanvas"></div>
		
	<script type="text/javascript">


			// Global scene object
			var scene;

			// Global camera object
			var camera;
			
			var WIDTH = window.innerWidth,
			    HEIGHT = window.innerHeight;
			
			var VIEW_ANGLE = 45,
			    ASPECT = WIDTH / HEIGHT,
			    NEAR = 1,
			    FAR = 100;

			var object;
		
			var circle;
			// Initialize the scene
			initializeScene();

			// Render the scene (map the 3D world to the 2D scene)
			//renderScene();
			
			// Animate the scene
           animateScene();

			/**
			 * Initialze the scene.
			 */
			function initializeScene(){

				if(Detector.webgl){
					renderer = new THREE.WebGLRenderer({antialias:true});

				// If its not supported, instantiate the canvas renderer to support all non WebGL
				// browsers
				} else {
					renderer = new THREE.CanvasRenderer();
				}

				// Set the background color of the renderer to black, with full opacity
				renderer.setClearColor(0x000000, 1);

				// Get the size of the inner window (content area) to create a full size renderer
				// Set the renderers size to the content areas size
				renderer.setSize(WIDTH, HEIGHT);

				
				// Get the DIV element from the HTML document by its ID and append the renderers DOM
				// object to it
				document.getElementById("WebGLCanvas").appendChild(renderer.domElement);

				// the scene contains all the 3D object data
				scene = new THREE.Scene();
				scene.add(camera);

				camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
				camera.position.set(0, 0, 10);
				camera.lookAt(scene.position);
				scene.add(camera);
				
			/*	scene.add( new THREE.AmbientLight( 0x30FF30 ) );

				var light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( -2.5, -1.2, 4.0 );
				scene.add( light );
				
				var uniforms = {
						  color: { type: "c", value: new THREE.Color( 0xffffff ) },
						};
				
				var attributes = {
						  size: { type: 'f', value: [] },
						};

						/*for (var i=0; i < numVertices; i++) {
						  attributes.size.value[i] = 5 + Math.floor(Math.random() * 10);
						}
				var shaderMaterial = new THREE.ShaderMaterial({
					uniforms: uniforms,
  					attributes: attributes,
					vertexShader:   document.getElementById('vertexshader').textContent,
					fragmentShader: document.getElementById('fragmentshader').textContent
				});*/
				
	              var triangleGeometry = new THREE.Geometry();
	              triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  0.35, 0.0));
	              triangleGeometry.vertices.push(new THREE.Vector3(-0.35, -0.35, 0.0));
	              triangleGeometry.vertices.push(new THREE.Vector3( 0.35, -0.35, 0.0));
	              triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
				
		        triangleGeometry.faces[0].vertexColors[0] = new THREE.Color(0xFF0000);
	            triangleGeometry.faces[0].vertexColors[1] = new THREE.Color(0x00FF00);
	            triangleGeometry.faces[0].vertexColors[2] = new THREE.Color(0x0000FF);


				var triangleMaterial = new THREE.MeshBasicMaterial({
					vertexColors:THREE.VertexColors,
					side:THREE.DoubleSide
				});


				object = new THREE.Mesh(triangleGeometry, triangleMaterial);
				object.position.set(-3.8, -1.2, 4.0);
				scene.add(object);


	
				var x = 0;
				for (var j = 0; j < 11; j++)
					{
				var squareGeometry = new THREE.Geometry();
				squareGeometry.vertices.push(new THREE.Vector3(-0.8+x,  0.8-x, 0.0));
				squareGeometry.vertices.push(new THREE.Vector3(0.8-x,  0.8-x, 0.0));
				squareGeometry.vertices.push(new THREE.Vector3(0.8-x, 0.77-x, 0.0));
				squareGeometry.vertices.push(new THREE.Vector3(-0.8+x, 0.77-x, 0.0));
				squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
				squareGeometry.faces.push(new THREE.Face3(2, 3, 0));
				
				
				var squareGeometry1 = new THREE.Geometry();
				squareGeometry1.vertices.push(new THREE.Vector3(-0.8+x, -0.8+x, 0.0));
				squareGeometry1.vertices.push(new THREE.Vector3(0.8-x, -0.8+x, 0.0));
				squareGeometry1.vertices.push(new THREE.Vector3(0.8-x, -0.77+x, 0.0));
				squareGeometry1.vertices.push(new THREE.Vector3(-0.8+x, -0.77+x, 0.0));
				squareGeometry1.faces.push(new THREE.Face3(0, 1, 2));
				squareGeometry1.faces.push(new THREE.Face3(2, 3, 0));
				
				var squareGeometry2 = new THREE.Geometry();
				squareGeometry2.vertices.push(new THREE.Vector3(0.83-x,  0.8-x, 0.0));
				squareGeometry2.vertices.push(new THREE.Vector3(0.8-x,  0.8-x, 0.0));
				squareGeometry2.vertices.push(new THREE.Vector3(0.8-x, -0.8+x, 0.0));
				squareGeometry2.vertices.push(new THREE.Vector3(0.83-x, -0.8+x, 0.0));
				squareGeometry2.faces.push(new THREE.Face3(0, 1, 2));
				squareGeometry2.faces.push(new THREE.Face3(2, 3, 0));

				var squareGeometry3 = new THREE.Geometry();
				squareGeometry3.vertices.push(new THREE.Vector3(-0.8+x,  0.8-x, 0.0));
				squareGeometry3.vertices.push(new THREE.Vector3(-0.77+x, 0.8-x, 0.0));
				squareGeometry3.vertices.push(new THREE.Vector3(-0.77+x, -0.8+x, 0.0));
				squareGeometry3.vertices.push(new THREE.Vector3(-0.8+x, -0.8+x, 0.0));
				squareGeometry3.faces.push(new THREE.Face3(0, 1, 2));
				squareGeometry3.faces.push(new THREE.Face3(2, 3, 0));
				
				// Create a white basic material and activate the 'doubleSided' attribute.

				var squareMaterial = new THREE.MeshBasicMaterial({
					color:0x00FF00,
					side:THREE.DoubleSide
				});
				

				// Create a mesh and insert the geometry and the material. Translate the whole mesh
				// by 1.5 on the x axis and by 4 on the z axis and add the mesh to the scene.
				object = new THREE.Mesh(squareGeometry, squareMaterial);
				object.position.set(-2.5, 0.0, 4.0);
				scene.add(object);
				
				object = new THREE.Mesh(squareGeometry1, squareMaterial);
				object.position.set(-2.5, 0.0, 4.0);
				scene.add(object);	
				
				object = new THREE.Mesh(squareGeometry2, squareMaterial);
				object.position.set(-2.5, 0.0, 4.0);
				scene.add(object);
				
				object = new THREE.Mesh(squareGeometry3, squareMaterial);
				object.position.set(-2.5, 0.0, 4.0);
				scene.add(object);
				
				x += 0.07;			
			}
			
			
		var resolution = 360;
		var amplitude = 0.5;
		var size = 360 / resolution;

		var geometry = new THREE.Geometry();
		var material = new THREE.MeshBasicMaterial( { color: 0xFF0000, side:THREE.DoubleSide} );
		for(var i = 0; i <= resolution; i++) 
		{
    		var segment = ( i * size ) * Math.PI / 180;
    		geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0.0, Math.sin( segment ) * amplitude, 0.0 ) ) );         
    		geometry.vertices.push( new THREE.Vertex( new THREE.Vector3(-(Math.cos( segment ) * amplitude), -(Math.sin( segment ) * amplitude), 0.0 ) ) );         
   			geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( Math.cos( segment ) * amplitude, -(Math.sin( segment ) * amplitude), 0.0 ) ) );         
		}

		circle = new THREE.Line( geometry, material );
		circle.position.set(-1.2, 1.3, 4.0);
     	scene.add(circle);
		}

		  function animateScene()
		  {	                    
	           requestAnimationFrame(animateScene);
			   // Map the 3D scene down to the 2D screen (render the frame)
			   renderScene();
	       }
			/**
			 * Render the scene. Map the 3D world to the 2D screen.
			 */
			function renderScene()
	        {
				for ( var i = 0, l = scene.children.length; i < l-1; i ++ ) {

					var object = scene.children[ i ];

					object.rotation.x += 0.001 * 1;
					object.rotation.y += 0.005;
				}
	           	//render the scene from the perspective of the camera
				renderer.render(scene, camera);
			}

		</script>
</body>
</html>
